<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{surveyTitle}}</title>
    <!-- 添加 Bootstrap 样式链接 -->
    <script src="/apps/js/baidu-tongji-mtx.js"></script>
    <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/apps/css/fontawesome-free-6.4.0-web/css/all.css">
    <!-- 添加自定义样式链接 -->
    <style>
        body{
            background-image: url('{{{background}}}');
            background-repeat: no-repeat; background-size: 100% 100%;
            background-position: center center; background-size: cover; -o-background-size: cover;
            -webkit-background-size: cover; -moz-background-size: cover;
            padding-bottom: 100px; min-height: 100vh; display: flex; flex-direction: column;
            opacity: 0.618;
        };
        .custom-card {
            background-color: #000; /* 背景颜色设置为黑色 */
            color: #fff; /* 文本颜色设置为白色 */
        }
    </style>
    <script src="/apps/js/baidu-tongji-mtx.js"></script>
</head>
<body>
    <div class="container">

        <div class="row mt-5">
            <div class="col-12">
                <!-- 活动信息提示区-->
                <div class="card custom-card">
                    <div class="card-body">
                        <h5 class="card-title">{{surveyTitle}}</h5>
                        <p class="card-text" id="collapsibleText">
                            {{{lotteryActivity.activity_description}}}
                        </p>
                         <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseText" aria-expanded="false" aria-controls="collapseText">
                            展开/收起 抽奖详情
                        </button>
                    </div>
                    <div class="collapse" id="collapseText">
                        <div class="card-body">
                            <p class="card-text">{{{lotteryActivity.activity_rules}}}</p>
                            <ul>
                                {{#each lotteryPrizes}}
                                <li>{{this.prize_name}} {{remaining_quantity}}/{{initial_quantity}}</li>
                                {{/each}}
                            </ul>
                            <p class="card-text">
                                奖池尚余{{remainingPrizes}}件，已有{{uniqueUidCount}}位用户抽中{{totalRecords}}件
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-12">
                <!-- 表单数据提交区 -->
                <div class="card">
                    <div class="card-body">

                        <h5 class="card-title">您还可提交{{remaining_attempts}}次有奖提问</h5>
                        <p class="card-text">当前可用金豆：{{member.points}}粒<br>注册<a href="https://oss.foodtrust.cn//35dde202404231440481456.png">官网小程序</a>可获1000金豆</p>
                        <div class="mb-3 row">
                            <label for="age" class="col-sm-2 col-form-label">患者年龄</label>
                            <div class="col-sm-10">
                                <select class="form-select" id="age">
                                    {{#each ageOptions}}
                                        <option value="{{this.name}}">{{this.description}}</option>
                                    {{/each}}
                                </select>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="gendar" class="col-sm-2 col-form-label">患者性别</label>
                            <div class="col-sm-10">
                                <select class="form-select" id="gendar">
                                    {{#each gendarOptions}}
                                        <option value="{{this.name}}">{{this.description}}</option>
                                    {{/each}}
                                </select>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="history" class="col-sm-2 col-form-label">病史时长</label>
                            <div class="col-sm-10">
                                <select class="form-select" id="history">
                                    {{#each historyOptions}}
                                        <option value="{{this.name}}">{{this.description}}</option>
                                    {{/each}}
                                </select>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="hospital" class="col-sm-2 col-form-label">就诊机构</label>
                            <div class="col-sm-10">
                                <input type="text" id="hospital" name="hospital" class="form-control" rows="10" value="" placeholder="最近一家进行诊断或治疗的医院或机构">
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="diagnosis" class="col-sm-2 col-form-label">疾病诊断</label>
                            <div class="col-sm-10">
                                <input type="text" id="diagnosis" name="diagnosis" class="form-control" rows="10" value="" placeholder="目前已诊断的疾病类型，例如LGS综合症">
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="therapy" class="col-sm-2 col-form-label">治疗方案</label>
                            <div class="col-sm-10">
                                <input type="text" id="therapy" name="therapy" class="form-control" rows="10" value="" placeholder="目前在用的药物或手术治疗方案">
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="goods" class="col-sm-2 col-form-label">辅助使用</label>
                            <div class="col-sm-10">
                                <!-- 将select标签的元素类型改为select multiple，允许多选 -->
                                <select class="form-select" id="goods" name="goods[]" multiple>
                                    <!-- 遍历选项并添加到select中 -->
                                    {{#each goodsOptions}}
                                        <option value="{{this.name}}">{{this.description}}</option>
                                    {{/each}}
                                </select>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="question" class="col-sm-2 col-form-label">希望在这次讲座上请专家解答的问题</label>
                            <div class="col-sm-10">
                                <textarea id="question" name="question" class="form-control" rows="10" value="" placeholder=""></textarea>
                            </div>
                        </div>
                        <button class="btn btn-primary" id="submit-button">{{buttonLabel}}</button>
                        <p class="card-text"></p>

                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-12">
                <!-- 提交结果 -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">抽奖结果</h5>
                        <ul>
                            {{#each userLotteryResults}}
                            <li>{{this.prize_name}} ({{this.added_at}}) | {{this.comment}}</li>
                            {{/each}}
                        </ul>
                        <p class="card-text" id="result-tips"></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-12">
                <div class="text-center">
                        <p class="card-text" style="color:#ffffff">无德之人终身难遇</p>
                        <img src="https://oss.foodtrust.cn//0af03202309272240581217.png" alt="二维码" style="max-width: 80%; max-height: 128px;">
                        <p class="card-text" style="color:#ffffff;font-size:12px">图腾生命医学官方小程序</p>
                        {{!--
                        <img src="https://oss.foodtrust.cn//TT-profile-0-spreader-1414-routine.jpg" alt="二维码" style="max-width: 80%; max-height: 168px;">
                        --}}
                </div>
            </div>
        </div>

    </div>

    <!-- 确认提交弹窗 -->
    <div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">确认提交</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>确认提交以下信息：</p>
                    <p>患者年龄: <span id="ageConfirmation"></span></p>
                    <p>患者性别: <span id="gendarConfirmation"></span></p>
                    <p>病史时长: <span id="historyConfirmation"></span></p>
                    <p>就诊机构: <span id="hospitalConfirmation"></span></p>
                    <p>疾病诊断: <span id="diagnosisConfirmation"></span></p>
                    <p>治疗方案: <span id="therapyConfirmation"></span></p>
                    <p>正在使用: <span id="goodsConfirmation"></span></p>
                    <p>相关问题: <span id="questionConfirmation"></span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="confirmCancelButton">返回修改</button>
                    <button type="button" class="btn btn-primary" id="confirmSubmitButton">确认提交</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加 jQuery 和 Bootstrap 的 JavaScript 链接 -->
    <script src="/apps/js/jquery-3.7.1.min.js"></script>
    <script src="/apps/js/bootstrap.bundle.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="/apps/js/wx-client-dom.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const uid = {{uid}};
            const balance = parseInt({{pointBalance}});
            const activityOnline = {{activityOnline}};
            const remaining_attempts = parseInt({{remaining_attempts}});
            const remainingPrizes = parseInt({{remainingPrizes}});
            const userDrawedCount = parseInt({{userDrawedCount}});
            const drawButton = document.getElementById("submit-button");
            const resultTips = document.getElementById("result-tips");

            if (userDrawedCount > 0) {
                resultTips.innerHTML = "{{{resultTips}}}";
            }

            if (!activityOnline) {
                drawButton.disabled = true;
                return;
            }

            if (remaining_attempts < 1) {
                drawButton.innerHTML = '有奖提问机会已用完';
                drawButton.disabled = true;
                return;
            };

            let isDrawing = false; // 添加一个标志位来防止多次点击
            drawButton.addEventListener("click", async function () {
                if (isDrawing) {
                    return;
                }

                isDrawing = true;
                drawButton.disabled = true;

                // 获取用户输入的数据
                const age = document.getElementById("age").value;
                const gendar = document.getElementById("gendar").value;
                const history = document.getElementById("history").value;
                const diagnosis = document.getElementById("diagnosis").value;
                const hospital = document.getElementById("hospital").value;
                const therapy = document.getElementById("therapy").value;
                const goodsValues = document.getElementById("goods").selectedOptions;
                const goods = Array.from(goodsValues).map(option => option.value).join(',');
                const question = document.getElementById("question").value;

                // 校验问题部分不留空
                if (!question && question.length<10) {
                    alert("请提供有意义的问题");
                    drawButton.disabled = false;
                    isDrawing = false;
                    return;
                }

                // 设置确认弹窗中的信息
                document.getElementById('ageConfirmation').innerText = age;
                document.getElementById('gendarConfirmation').innerText = gendar;
                document.getElementById('historyConfirmation').innerText = history;
                document.getElementById('diagnosisConfirmation').innerText = diagnosis;
                document.getElementById('hospitalConfirmation').innerText = hospital;
                document.getElementById('therapyConfirmation').innerText = therapy;
                document.getElementById('goodsConfirmation').innerText = goods;
                document.getElementById('questionConfirmation').innerText = question;

                // 显示确认弹窗
                $('#confirmationModal').modal('show');
            });

            // 如果用户点击确认提交
            document.getElementById('confirmSubmitButton').addEventListener('click', async function () {
                // 隐藏确认弹窗
                $('#confirmationModal').modal('hide');

                // 获取用户输入的数据
                const age = document.getElementById("age").value;
                const gendar = document.getElementById("gendar").value;
                const history = document.getElementById("history").value;
                const diagnosis = document.getElementById("diagnosis").value;
                const hospital = document.getElementById("hospital").value;
                const therapy = document.getElementById("therapy").value;
                const goodsValues = document.getElementById("goods").selectedOptions;
                const goods = Array.from(goodsValues).map(option => option.value).join(',');
                const question = document.getElementById("question").value;

                // 执行提交逻辑
                try {
                    const response = await fetch("/apps/loyalty/take-survey/{{lotteryActivity.activity_code}}", {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ uid, age, gendar, history, diagnosis, hospital, therapy, goods, question })
                    });

                    if (response.ok) {
                        const result = await response.json();
                        // 根据结果更新页面上的显示
                        if (result.prize_id) {
                            const resultMessage = `${result.tips}`;
                            alert(resultMessage);
                        } else {
                            const resultMessage = `${result.message}`;
                            alert(resultMessage);
                        }
                        location.reload();
                    } else {
                        const resultMessage = "提交问题失败，请重试";
                        alert(resultMessage);
                        drawButton.innerHTML = '点击登记提交问题';
                        drawButton.disabled = false;
                        isDrawing = false;
                    }
                } catch (error) {
                    console.log('error: ',error);
                    const resultMessage = "提交结果异常，请重试";
                    alert(resultMessage);
                    drawButton.innerHTML = '点击登记提交问题';
                    drawButton.disabled = false;
                    isDrawing = false;
                }
            });

            // 如果用户点击返回修改
            document.getElementById('confirmCancelButton').addEventListener('click', function () {
                // 隐藏确认弹窗
                $('#confirmationModal').modal('hide');
                drawButton.disabled = false;
                isDrawing = false;
            });
        });
    </script>

</body>
</html>

